<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div>
    选择发送的对象
    <select name="accepter" id="accepter" onchange="accepterChange(this.value)">
        <option value ='all'>全部</option>
    </select>
</div>
<div>
    <input id="text" type="text">
    <button onclick="send()"> 发送</button>
    <button onclick="closeWebSocket()"> 断开</button>
    <div id="message"></div>
</div>

<script type="text/javascript">
    var websocket = null;
    var accepter = "";
    var name = randomString(5)
    var init = function () {

        connect();
        select();
        accepterChange("all");
    }();

    function connect() {
        if ("WebSocket" in window) {
            websocket = new WebSocket("ws://localhost:8080/p2p?name=" + name);
            websocket.onopen = function (event) {
                setMessageHtml("onopen");
            }
            websocket.onclose = function (event) {
                setMessageHtml("onclose");
            }
            websocket.onmessage = function (event) {
                setMessageHtml(event.data);
            }
        } else {
            alert("not find socket")
        }

    }



    function accepterRegistered() {
        let xmlHttp = new XMLHttpRequest;
        xmlHttp.open('GET', 'http://localhost:8080/accepter?initiator=' + name + "&" + "accepter=" + accepter);
        xmlHttp.setRequestHeader('content-type', 'application/json');
        xmlHttp.send();
    }

    function setMessageHtml(innerHTML) {
        document.getElementById("message").innerHTML += innerHTML + "<br/>";

    }

    function setSelectHtml(list) {
        for (let i  in list) {
            if (name != list[i]) {
                document.getElementById("accepter").innerHTML += '<option value =' + list[i] + '>' + list[i] + '</option>';
            }
        }
    }


    function closeWebSocket() {
        websocket.close();
    }

    function send() {
        let data = document.getElementById("text").value;
        websocket.send(data);
        document.getElementById("text").value = "";
    }

    function randomString(len) {
        len = len || 32;
        let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        let maxPos = $chars.length;
        let pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }

    function accepterChange(data) {
        accepter = data;
        accepterRegistered();
    }

    function select() {
        let xmlHttp = new XMLHttpRequest;
        xmlHttp.open('GET', 'http://localhost:8080/list');
        xmlHttp.setRequestHeader('content-type', 'application/json');
        xmlHttp.send();
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                let json = xmlHttp.responseText;//获取到json字符串，还需解析
                let list = JSON.parse(json);
                accepter = list.length > 0 ? list[0] : "";
                setSelectHtml(list);
            }
        };
    }

</script>
</body>
</html>